<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
  { title: '吃饭', done: true },
  { title: '睡觉', done: false },
  { title: '看电视', done: false },
  { title: '打麻将', done: false }
])
</script>

<template>
  <!--默认插槽-->
  <div style="border: solid 10px green; padding: 20px">
    <h2>默认插槽</h2>
    <slot></slot>
  </div>

  <!--具名插槽-->
  <div style="border: solid 10px red; padding: 20px">
    <h2>具名插槽: slot标签，增加 name="xxx"</h2>
    <div>
      <slot name="a"></slot>
    </div>
    <div>
      <slot name="b"></slot>
    </div>
  </div>

  <!--作用域插槽-->
  <div style="border: solid 10px blue; padding: 20px">
    <h2>作用域插槽: 父组件可以访问子组件插槽作用域中的数据</h2>
    <div v-for="(item, index) in list" :key="index">
      <slot name="c" :row="item" :index="index"></slot>
    </div>
  </div>
</template>

<style scoped></style>
